<script setup>
import { ref } from 'vue'
const props = defineProps({
  msg: {
    type: String,
    required: true
  },
  data: {
    type: Object,
    required: false,
    default (){
      return [
        {title:'智能化控制研发中心',image:'/src/assets/智能化控制研发中心.png',infor:'为了突破这一关键核心问题,芯瑞微正式宣布在西安启动CFD(计算流体力学)研发中心,以加速仿真工具的国产化'},
        {title:'流量与试验研发中心',image:'/src/assets/流量与试验研发中心.jpg',infor:'流量与试验研发中心，为了突破这一关键核心问题,芯瑞微正式宣布在西安启动CFD(计算流体力学)研发中心,以加速仿真工具的国产化'},
        {title:'材料与应用研发中心',image:'/src/assets/1124_1.jpg',infor:'材料与应用研发中心,为了突破这一关键核心问题,芯瑞微正式宣布在西安启动CFD(计算流体力学)研发中心,以加速仿真工具的国产化'},
        {title:'流体与仿真研发中心',image:'/src/assets/1124_1.jpg',infor:'智能化控制研发中心,为了突破这一关键核心问题,芯瑞微正式宣布在西安启动CFD(计算流体力学)研发中心,以加速仿真工具的国产化'}
      ]
    }
  }
})
const current = defineModel();
current.value = 0;
function bindleChange(params){
    current.value = params
}

const count = ref(0)
</script>

<template>
    <div class="fixed w-full h-full absolute left-0 top-0 Mask Mask20">
        <img class="wen-icon z-[-1]" src="/src/assets/image_3.jpg" />
    </div>
    <div class="w-full h-auto self-center mobile:h-full mobile:pt-24 mobile:px-6">
        <div class="flex mb-10 mobile:block mobile:mb-20">
            <span class="text-5xl text-white relative z-10 mobile:text-3xl">技术研发</span>
        </div>
        <div class="flex mobile:block">
            <div class="w-full flex-auto mobile:hidden">
            </div>
            <div class="w-full flex-auto mobile:flex">
                <div class="w-full max-w-[320px] mobile:max-w-full float-right mobile:pb-12 mobile:max-w-40 wow animate__animated animate__fadeIn timing" data-wow-duration="0.5s" data-wow-delay="0.5s">
                    <div class="w-full h-52 relative cursor-pointer mobile:h-28 mobile:mb-1  mobile:w-1/2 mobile:float-left" v-for="(item, index) in data" :key="index" @click="bindleChange(index)">
                        <div class="w-full h-full">
                            <img class="wen-icon" :src="item.image" />
                        </div>
                        <div class="w-full h-full absolute left-0 top-0 p-8 bg-[#0009] hover:bg-gradient-to-t hover:from-[#334CCCCC] hover:to-[#334CCC00] mobile:p-3 mobile:text-left">
                            <p class="mt-10 text-white text-2xl font-bold mobile:my-3">0{{index+1}}</p>
                            <p class="text-white text-xl mobile:text-sm">{{item.title}}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="absolute bottom-0 left-0 w-1/2 max-w-[720px] mobile:w-full mobile:relative">
                <div class="p-[80px] pb-36 bg-dominant mobile:h-48 mobile:py-10 mobile:px-4 wow animate__animated animate__fadeInUp timing">
                    <h3 class="text-[40px] text-white mb-6 mobile:text-2xl">{{data[current].title}}</h3>
                    <p class="text-2xl text-white/60 mobile:text-sm mobile:line-clamp-3">{{data[current].infor}}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
</style>
